<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Authentication Successful</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism-tomorrow.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/prism.min.js"></script>
    <style>
        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }

        pre[class*="language-"] {
            position: relative;
            overflow: auto;

            /* make space  */
            margin: 5px 0;
            padding: 1.75rem 0 1.75rem 1rem;
            border-radius: 10px;
        }

        pre[class*="language-"] button {
            position: absolute;
            top: 5px;
            right: 5px;

            font-size: 0.9rem;
            padding: 0.15rem;
            background-color: #828282;

            border: ridge 1px #7b7b7c;
            border-radius: 5px;
            text-shadow: #c4c4c4 0 0 2px;
        }

        pre[class*="language-"] button:hover {
            cursor: pointer;
            background-color: #bcbabb;
        }

        main {
            display: grid;
            max-width: 600px;
            margin: 20px auto;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }

        h1 {
            font-size: 1.3rem;
        }
    </style>
</head>
<body>

<main>
    <h1>Authentication Successful</h1>
    <p>To complete authentication, copy and run this code</p>
    <pre>$ <code class="language-sh">jprq auth %s</code></pre>
</main>

<script>
    const copyButtonLabel = "Copy";
    let blocks = document.querySelectorAll("pre");

    blocks.forEach((block) => {
        if (navigator.clipboard) {
            let button = document.createElement("button");
            button.innerText = copyButtonLabel;
            block.appendChild(button);
            button.addEventListener("click", async () => {
                await copyCode(block, button);
            });
        }
    });

    async function copyCode(block, button) {
        let code = block.querySelector("code");
        let text = code.innerText;
        await navigator.clipboard.writeText(text);
        button.innerText = "Copied";
        setTimeout(() => {
            button.innerText = copyButtonLabel;
        }, 700);
    }
</script>
</body>
</html>